.c-nav-l {

    background-color: #F42424;
}
.c-search input {
    border: 2px solid #F42424;

}
.c-search button {
    background-color: #F42424;
}
.c-search .c-search-store {
    background-color: #B31919;
}

/* 商品详情小导航栏 */
.goods-nav {
    width: 100%;
    height: 40px;
    background-color: #f8f8f8;
    padding-top: 5px;
}
.goods-nav-main {
    height: 30px;
}
.goods-nav-item {
    float: left;
}
.class-box {
    display: inline-block;
    width: 100px;
    height: 25px;
    margin-top: 2px;
    border: 1px solid #ccc;
    background-color: #fff;
    text-align: center;
    line-height: 25px;
}
.class-box a span{
    color: #555;
}
.class-box a span::after {
    content: '\e91e';
    font-family: 'icomoon';
    vertical-align: middle;
    font-size: 14px;
}
.goods-nav-item i {
    display: inline-block;
    font-family: 'icomoon';
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 16px;
    vertical-align: middle;
}
.goods-name {
    float: left;
    display: block;
    line-height: 30px;
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* 商品详情 */
.product {
    width: 100%;
    height: 550px;
    margin-top: 20px;
}
.glass {
    float: left;
    width: 400px;
    height: 550px;
}

.min {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #d2d2d2;
}
.min img {
    width: 100%;
    height: 100%;
}


.max {
    display: none;
    position: absolute;
    top: -1px;
    left: 398px;
    width: 400px;
    height: 500px;
    border: 1px solid #d2d2d2;
    overflow: hidden;
    z-index: 999;
    background-color: pink;
}

.max img {
    position: absolute;
    width: 200%;
    height: 200%;
}

.mask {
    display: none;
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: rgba(12, 212, 129, 0.3);
    cursor: move;
}
.spec-list {
    width: 400px;
    height: 90px;
    border: 1px solid #d2d2d2;
    border-top: 0;
    padding: 15px 0;
}
.spec-list>a {
    display: block;
    width: 30px;
    height: 30px;
    font-family: 'icomoon';
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    margin-top: 15px;
}
.spec-prev {
    float: left;
}
.spec-next {
    float: right;
}
.spec-items {
    float: left;
    height: 60px;
    width: 338px;
}
.spec-items ul li {
    float: left;
    height: 60px;
    width: 60px;
    margin: 0 3px;
    text-align: center;
    border: 1px solid transparent;
}
.spec-items ul li:hover{
    border: 1px solid #f42424;
}

.short-share {
    width: 400px;
    height: 30px;
    margin-top: 30px;
    line-height: 30px;
}
.left-btn {
    float: left;
}

.left-btn a label {
    cursor: pointer;
}
.left-btn a:hover em,
.left-btn a:hover span{
    color: #f42424;
}
.left-btn a label:hover {
    color: #f42424;
}
.left-btn input {
    display: none;
}
.left-btn label {
    padding: 0 15px 0 25px;
    margin-left: 20px;
    border-right: 1px solid #ccc;
    background: url(../images/checkbox_12x12.png) no-repeat 4px 3px;
}
.r-jubao {
    float: right;
    color: rgb(67, 140, 222);
}

.mess-center {
    float: left;
    width: 580px;
    margin: 0 20px;
}
.mess-center .name {
    font-size: 16px;
    color: #555;
    font-weight: 700;
    margin-bottom: 10px;
}
.mess-center .name img {
    vertical-align: middle;
    height: 20px;
}
.mess-center .price {
    position: relative;
    height: 100px;
    background-color: #F3F3F3;
    padding: 20px 20px;
}

.mess-center .price-small strong {
    font-size: 30px;
    color: #F42424;
    vertical-align: middle;
    margin-left: 20px;
}
.mess-center .price-small span {
    display: inline-block;
    width: 60px;
    height: 20px;
    vertical-align: middle;
    background: url(../images/dsc-icon.png) no-repeat -296px -44px;
    margin-left: 10px;
    text-align: center;
    line-height: 20px;
    color: #fff;
}
.mess-center .price-big span {
    margin-left: 20px;
    text-decoration: line-through;
    color: #555;
}
.si-info {
    position: absolute;
    top: 30px;
    right: 5px;
}
.si-info .si-cumulative {
    float: left;
    padding-right: 10px;
    margin-right: 10px;
    font-size: 12px;
    line-height: 14px;
    border-right: 1px solid #d2d2d2;
}

.si-info .si-cumulative:last-child {
    border: 0;
}
.si-info .si-cumulative em {
    font-size: 14px;
    color: #b31919;
    margin-left: 8px;
}
.code-info {
    position: absolute;
    cursor: pointer;
    top: 55px;
    right: 40px;
    z-index: 8;
}
.code-info:hover .code {
    display: block;
}
.code-info .code {
    display: none;
    position: absolute;
    top: 20px;
    left: -60px;
    z-index: 99;
    right: -52px;
    width: 180px;
    height: auto;
    background-color: #fff;
    box-shadow: 0px 2px 10px rgb(204 204 204);
    text-align: center;
    margin-top: 8px;
    padding: 10px 0;
}
.code-info .code img {
    width: 160px;
}

.site {
    height: 170px;
    margin-top: 10px;
    padding-left: 30px;
}
.site-tr {
    height: 30px;
    margin-bottom: 5px;
}
.site-prev {
    float: left;
    width: 70px;
    height: 30px;
    line-height: 30px;
}
.site-next {
    float: left;
    height: 30px;
    line-height: 30px;
}
.site-next .tit {
    display: inline-block;
    height: 30px;
    width: 220px;
    padding-left: 10px;
    border: 1px solid #ccc;
}
.site-next .tit i {
    font-family: 'icomoon';
    font-size: 16px;
    vertical-align: middle;
}
.site-next strong {
    font-size: 16px;
    color: #555;
}
.site-next a {
    color: #b31919;
}
.site-next a:hover {
    color: #f42424;
}
.site-tr:nth-child(2) .site-next span,
.site-tr:nth-child(3) .site-next{
    color: #555;
}
.inp-btn {
    float: left;    
    height: 30px;
    width: 70px;
    margin-right: 20px;
}
.inp-btn input {
    float: left;
    height: 30px;
    width: 50px;
    padding-left: 20px;
}
.inp-btn button {
    float: left;
    width: 20px;
    height: 15px;
    font-family: 'icomoon';
    font-size: 14px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.site-tr:nth-child(5) .site-next a img {
    width: 16px;
    color: #555;
    vertical-align: text-top;
}
.site-tr:nth-child(5) .site-next a{
    color: #555;
}
.site-tr:nth-child(5) .site-next a:hover{
    color: #F42424;
}
.buy-btn {
    height: 100px;
    margin-top: 30px;
}
.buy-btn a {
    display:block;
    float: left;
    height: 40px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
}
.buy-btn a:nth-child(1) {
    width: 100px;
    background-color: #FF8F22;
    margin: 0 15px 0 100px;
}
.buy-btn a:nth-child(2) {
    width: 150px;
    background-color: #F42424;
}
.buy-btn a:nth-child(2) i {
    font-family: 'icomoon';
    font-size: 14px;
    margin-right: 5px;
    color: #fff;
    vertical-align: middle;
}






.mess-r {
    float: right;
    width: 180px;
    height: 520px;
    border: 1px solid #ccc;
    padding: 10px;
}
.mess-r .mess-box {
    border-bottom: 1px dashed #ccc;
}
.mess-box .log {
    display: block;
    width: 100%;
    height: 70px;
    text-align: center;
    margin-bottom: 10px;
}
.mess-box .log  img {
    height: 70px;
}
.mess-box .store-name{
    text-align: center;
    margin-bottom: 10px;
}
.mess-box .store-name a {
    font-weight: 700;
    color: #555;
}
.mess-box .store-name a:hover {
    color: #F42424;
}
.mess-box .store-name i {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../images/dsc-icon.png) no-repeat -260px 0;
    vertical-align: middle;
}
.mess-box .star {
    height: 18px;
    width: 110px;
    margin: 10px auto;
    border-radius: 9px;
    border: 1px dashed #ccc;
}
.mess-box .star-l {
    float: left;
    width: 60px;
    height: 12px;
    margin-top: 2px;
    background: url(../images/dsc-icon.png) no-repeat -296px -18px;
}
.mess-box .star-c {
    float: left;
    line-height: 15px;
    margin-left: 5px;
}
.mess-box .star-r {
    float: left;
    width: 5px;
    height: 5px;
    font-family: 'icomoon';
    margin-top: 2px;
    font-size: 14px;
}
.mess-box .score {
    width: 110px;
    margin: 0 auto;
}
.mess-box .score-box {
    margin-bottom: 10px;
}
.mess-box .score span {
    margin:0 15px 0 10px;
}
.mess-box .score span:last-child {
    color: #23bc17 ;
}
.mess-box>p {
    text-align: center;
    margin: 0 0 10px 0;
}
.mess-box .tel-code img {
    margin-top: 10px;
    width: 160px;
}

.mess-r-love {
    padding: 10px;
    border-bottom: 1px  dashed #ccc;
}
.mess-r-love a {
    display: inline-block;
    margin: 0 10px 0 10px;
    padding-right: 15px;
    border-right: 1px dashed #ccc;
}
.mess-r-love a:last-child {
    margin: 0;
    padding: 0;
    border: 0;
}
.mess-r-love i {
    color: #F42424;
    font-family: 'icomoon';
    font-size: 14px;
    vertical-align: middle;
}
.mess-r-tele {
    text-align: center;
    padding: 10px 0;
}
.mess-r-tele i {
    font-family: 'icomoon';
    margin-right: 5px;
    font-size: 14px;
    vertical-align: middle;
}













  




.m_c {
        width: 1200px;
        height: 2200px;
        margin: 0 auto;
}
    
.m_c_a {
        width: 200px;
        height: 2150px;
        float: left;
}
    
    .m_c_b {
        width: 960px;
        height: 2190px;
        float: left;
        margin-left: 30px;
    }
    
    .mca1 {
        width: 200px;
        height: 150px;
        border: 1px solid lightgray;
    }
    
    .mcaa1 {
        width: 196px;
        height: 30px;
        background-color: rgb(248, 248, 248);
        padding-left: 20px;
        line-height: 30px;
        background-image: url(../images/homepage10175.ico);
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: 160px 5px;
    }
    
    .mcaa2 {
        width: 198px;
        height: 120px;
        background-image: url(../images/homepage10098.jpg);
        background-repeat: no-repeat;
        background-position: 0px 10px;
    }
    
    .mca2 {
        width: 200px;
        height: 350px;
        margin-top: 20px;
        border: 1px solid lightgray;
    }
    
    .mca21 {
        width: 198px;
        height: 30px;
        background-color: rgb(248, 248, 248);
        padding-left: 20px;
        line-height: 30px;
        padding-left: 20px;
    }
    
    .mca22 {
        width: 200px;
        height: 320px;
    }
    
    .m_c_a ul li {
        list-style: square;
        margin-left: 35px;
        color: darkgrey;
        line-height: 30px;
        font-size: 13px;
    }
    
    .m_c_a ul li:hover {
        color: red;
    }
    
    .mca3 {
        width: 200px;
        height: 70px;
        border: 1px solid lightgray;
        margin-top: 20px;
    }
    
    .mca31 {
        width: 198px;
        height: 30px;
        padding-left: 20px;
        line-height: 30px;
        background-color: rgb(248, 248, 248);
    }
    
    .mca4 {
        width: 200px;
        height: 1300px;
        margin-top: 20px;
        border: 1px solid lightgray;
        border-top: none;
        position: relative;
    }
    
    .mca41 {
        width: 198px;
        height: 40px;
        background-color: rgb(248, 248, 248);
    }
    
    .mca41 ol li {
        width: 66px;
        height: 40px;
        float: left;
        border: 1px solid lightgray;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }
    
    .mca41 ol li:nth-child(3) {
        border-right: none;
    }
    
    .mca42 {
        width: 198px;
        height: 1250px;
        position: absolute;
        top: 40px;
        display: none;
    }
    
    .mca41 .current {
        border-top: 3px solid red;
        border-bottom: none;
        background-color: white;
    }
    
    .mca421 {
        width: 140px;
        height: 1400px;
        margin-left: 60px;
    }
    
    .mca421 div {
        width: 140px;
        height: 200px;
        margin-top: 10px;
        position: relative;
    }
    
    .mca421 div img {
        width: 130px;
        height: 140px;
    }
    
    .mca421 div p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        margin-top: 5px;
    }
    
    .mca421 div span {
        display: inline-block;
        color: red;
        font-size: 14px;
        margin-top: 5px;
    }
    
    .mca421 div::after {
        content: "1";
        position: absolute;
        display: inline-block;
        top: 60px;
        left: -50px;
        width: 30px;
        height: 30px;
        background-color: red;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        color: white;
    }
    
    .mca421 div:nth-of-type(2)::after {
        content: "2";
    }
    
    .mca421 div:nth-of-type(3)::after {
        content: "3";
    }
    
    .mca421 div:nth-of-type(4)::after {
        content: "4";
        background-color: rgb(85, 85, 85);
    }
    
    .mca421 div:nth-of-type(5)::after {
        content: "5";
        background-color: rgb(85, 85, 85);
    }
    
    .mca421 div:nth-of-type(6)::after {
        content: "6";
        background-color: rgb(85, 85, 85);
    }
    
    .mca421 div::before {
        content: "";
        display: inline-block;
        width: 0px;
        height: 200px;
        border-left: 1px dashed darkgrey;
        position: absolute;
        top: 70px;
        left: -35px;
    }
    
    .mca421 div:nth-of-type(6)::before {
        content: "";
        border: none;
    }
    
    .mca5 {
        width: 200px;
        height: 240px;
        margin-top: 20px;
        border: 1px solid lightgray;
    }
    
    .mca51 {
        width: 198px;
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
        background-color: rgb(248, 248, 248);
    }
    
    .mca52 {
        width: 160px;
        height: 210px;
        margin: 0px auto;
    }
    
    .mca52 img {
        width: 158px;
        height: 138px;
    }
    
    .mca52 p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        margin-top: 5px;
    }
    
    .mca52 span {
        display: inline-block;
        margin-top: 5px;
        color: red;
    }
    /* 详情 */
    
    .mcb1 {
        width: 960px;
        height: 35px;
        border-bottom: 1px solid darkgrey;
        position: relative;
    }
    
    .mcb1 ul li {
        width: 100px;
        height: 35px;
        text-align: center;
        float: left;
        line-height: 35px;
        border: 1px solid darkgrey;
    }
    
    .mcb1 span {
        font-family: 'icomoon';
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: grey;
        margin-left: 435px;
    }
    
    .mcb1 p {
        display: inline-block;
        width: 120px;
        height: 32px;
        background-color: orangered;
        color: white;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
    }
    
    .mcb1 .current {
        border-top: 3px solid red;
        border-bottom: none;
        background-color: white;
    }
    
    .mcb2 {
        width: 960px;
        height: 2150px;
        /* border: 1px solid red; */
        position: absolute;
        display: none;
    }
    
    .mcb21 {
        width: 100%;
        height: 35px;
        margin-top: 20px;
        line-height: 35px;
        border-bottom: 1px solid darkgrey;
        padding-left: 15px;
        position: relative;
    }
    
    .mcb21 h2::before {
        content: "";
        width: 4px;
        height: 20px;
        background-color: red;
        position: absolute;
        left: 0px;
        top: 8px;
    }
    
    .mcb22 {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid lightgray;
        margin-top: 10px;
    }
    
    .mcb22 p {
        display: inline-block;
        margin: 20px 20px;
        font-size: 13px;
        line-height: 0;
    }
    
    .mcb23 {
        width: 100%;
        height: 450px;
        margin-top: 20px;
        background-image: url(../images/homepage10107.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    
    .mcb24 {
        width: 100%;
        height: 550px;
        margin-top: 20px;
        background-image: url(../images/1.png);
        background-repeat: no-repeat;
        background-size: 120% 120%;
        background-position: -50px -15px;
    }
    
    .mcb25 {
        width: 100%;
        height: 650px;
        margin-top: 20px;
        background-image: url(../images/2.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    
    .mcb22_2 h2,
    .mcb22_3 h2 {
        display: inline-block;
    }
    
    .mcb22_2 span,
    .mcb22_3 span {
        display: inline-block;
        margin-left: 30px;
    }
    
    .mcb22_2 span:hover {
        color: red;
    }
    
    .mcb22_3 span:hover {
        color: red;
    }
    
    .mcb222 {
        width: 100%;
        height: 100px;
    }
    
    .mcb222 {
        width: 180px;
        height: 80px;
        margin-top: 10px;
        border-right: 1px solid lightgray;
        padding: 20px 30px;
        position: relative;
    }
    
    .mcb222 p {
        width: 0px;
        display: inline-block;
        font-size: 38px;
        color: red;
    }
    
    .mcb222 span {
        display: inline-block;
        color: red;
        margin-left: 65px;
        font-size: 16px;
        font-weight: 700;
    }
    
    .mcb222 p::after {
        content: "好评率";
        position: absolute;
        font-size: 12px;
        color: darkgrey;
        top: 28px;
        left: 110px;
    }
    /* 猜你喜欢区域 */
    
    .m_d {
        width: 1200px;
        height: 330px;
        margin: 0 auto;
    }
    
    .md1 {
        width: 100%;
        height: 45px;
    }
    
    .md1 p {
        width: 100%;
        height: 45px;
        line-height: 45px;
        font-size: 22px;
        text-align: center;
        position: relative;
    }
    
    .md1 p::after {
        content: "";
        display: block;
        width: 500px;
        height: 0px;
        border-top: 3px dashed lightgray;
        position: absolute;
        top: 20px;
        left: 0px;
    }
    
    .md1 p::before {
        content: "";
        display: block;
        width: 500px;
        height: 0px;
        border-top: 3px dashed lightgray;
        position: absolute;
        top: 20px;
        right: 0px;
    }
    
    .md2 {
        width: 100%;
        height: 280px;
        display: flex;
        justify-content: space-between;
    }
    
    .md2 div {
        width: 220px;
        height: 280px;
        text-align: center;
    }
    
    .md2 div img {
        width: 220px;
        height: 220px;
    }
    
    .md2 div p {
        line-height: 28px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 160px;
        margin-left: 30px;
        font-size: 12px;
    }
    
    .md2 div span {
        color: red;
    }
    
    .md2 div p:hover {
        color: red;
    }